<!-- 用户收藏页面 -->
<script setup>
	import {
		ref,
		onMounted,
		reactive,
		computed,
		onUnmounted
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getCollectList
	} from '@/api/user.js'
	import {
		useUserInfoStore
	} from "@/stores/modules/user.js"
	import {
		debounce
	} from "@/utils/common.js"

	const userTokenInfo = useUserInfoStore();
	// 响应式数据
	const materialList = ref([])
	const loading = ref(false)
	const page = ref(1)
	const pageSize = ref(10)
	const hasMore = ref(true)
	// 第一列数据
	const list1 = ref([])
	// 第二列数据
	const list2 = ref([])

	// 页面数据
	const pageData = reactive({
		leftGap: 10,
		rightGap: 10,
		columnGap: 10,

	})


	// 页面加载时获取参数
	onLoad((options) => {

	})

	onReady(() => {
		if (materialList.value.length === 0) {
			loadData()
		}
	})


	// 初始化加载数据
	onShow(() => {

	})

	onReachBottom(() => {
		handleReachBottom()
	})

	// 触底加载更多
	const handleReachBottom = debounce(async () => {
		console.log("触发触底了！");
		if (!hasMore.value || loading.value) return
		page.value += 1
		await loadData();
	}, 300)

	// 页面样式
	const imageStyle = (item) => {
		const v = uni.upx2px(750) - pageData.leftGap - pageData.rightGap - pageData.columnGap;
		const w = v / 2;
		const rate = w / item.w;
		const h = rate * item.h;
		return {
			width: w + 'px',
			height: h + 'px'
		}
	}
	// 列表数据变化
	const changeList = (e) => {
		console.log("changlist：", e);
		if (e.name === 'list1') {
			list1.value.push(e.value)
		} else {
			list2.value.push(e.value)
		}
		// console.log("list2", list2.value);
	}


	// 加载数据方法
	const loadData = async () => {
		try {
			loading.value = true
			console.log("分页大小：", page.value);
			const params = {
				userId: userTokenInfo.userId,
				pageNum: page.value,
				pageSize: pageSize.value
			}

			const res = await getCollectList(params)

			if (res.code === 200 && res.data) {
				// 处理接口数据
				const processedData = res.data.map((item, index) => ({
					...item,
					w: 170, // 固定宽度
					h: 240 // 固定高度
				}))
				// 首次加载清空数据
				if (page.value === 1) {
					materialList.value = processedData
				} else {
					materialList.value = [...materialList.value, ...processedData]
				}

				// 判断是否还有更多数据
				hasMore.value = res.data.length >= pageSize.value
			} else if (res.code === 200 && res.data === undefined || res.data === null) {
				// 用户刚收藏数是10的倍数时
				hasMore.value = false

			} else {
				uni.showToast({
					title: res.msg || '数据加载失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('请求异常:', error)
			uni.showToast({
				title: '网络请求失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}

	// 点击素材处理
	const onPreview = (data) => {
		// 这里可以添加跳转逻辑
		uni.navigateTo({
			url: '/pages/preview/preview'
		})
		// 传递素材信息
		uni.setStorageSync("materialInfo", JSON.stringify(data))
	}
</script>

<template>
	<view class="loadingLayout" v-if="!materialList.length && loading">
		<uv-load-more status="loading" loading-text="加载中..." />
	</view>
	<view class="waterfall">
		<uv-waterfall ref="waterfall" v-model="materialList" :columnCount="2" :add-time="10"
			:left-gap="pageData.leftGap" :right-gap="pageData.rightGap" :column-gap="pageData.columnGap"
			@changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
						<view class="waterfall-item__image" :style="[imageStyle(item)]" @click="onPreview(item)">
							<image :src="item.thumbnailUrl" mode="aspectFill" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item.materialTitle}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

			<!-- 第二列数据 -->
			<template v-slot:list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
						<view class="waterfall-item__image" :style="[imageStyle(item)]" @click="onPreview(item)">
							<image :src="item.thumbnailUrl" mode="aspectFill" :style="{width:item.width+'px'}"></image>
						</view>
						<view class="waterfall-item__ft">
							<view class="waterfall-item__ft__title">
								<text class="value">{{item.materialTitle}}</text>
							</view>
							<view class="waterfall-item__ft__desc uv-line-2">
								<text class="value">{{item.desc}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>

		</uv-waterfall>
		<!-- 加载状态提示 -->
		<view class="loading-status" v-if="materialList.length || !hasMore">
			<uv-load-more status="nomore" nomore-text="已经到底啦~" line lineColor="#e2e2e2" />
		</view>
	</view>
	<view class="safe-area-inset-bottom">
	</view>
</template>

<style>
	page {
		background: #f1f1f1;
	}
</style>


<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}

	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;
		backdrop-filter: blur(5px) brightness(90%);
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 10px;

		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;
			text-align: center;

			.value {
				font-size: 32rpx;
				color: #303133;

			}
		}

		&__desc {
			text-align: center;

			.value {
				font-size: 28rpx;
				color: #606266;
			}
		}

		&__btn {
			padding: 10px 0;
		}
	}

	.loading-status {
		grid-column: 1 / -1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 24rpx;
		color: #999;

		.no-more {
			display: block;
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
</style>